<template>
    <div style="padding: 10px">


      <div style="margin: 10px 0">

        <div>

          <el-input v-model="searchId" clearable placeholder="请输入班级编号以搜索" prefix-icon="el-icon-star-on"
                    style="width: 300px;margin-left: 15px"></el-input>

          <el-input v-model="searchName" clearable placeholder="请输入班级名称以搜索" prefix-icon="el-icon-s-flag"
                    style="width: 300px;margin-left: 15px"></el-input>

          <el-button icon="el-icon-search" plain size="large" type="success" @click="load">搜索</el-button>

          <el-button icon="el-icon-search" plain size="large" type="warning" @click="reset">重置</el-button>

        </div>


        <div style="margin: 10px 15px">


          <el-button icon="el-icon-circle-plus" plain size="large" type="primary" @click="addClass">新增</el-button>

          <el-popconfirm cancel-button-text="我在想想哈" icon-color="red" title="确定批量删除吗？" @confirm="removeBatchByIds">

            <el-button slot="reference" icon="el-icon-remove-outline" plain size="large" style="margin-left: 10px"
                       type="danger">批量删除

            </el-button>

          </el-popconfirm>


          <el-upload :on-success="importSuccess" :show-file-list="false" action="/class/import"
                     style="display: inline-block">

            <el-button icon="el-icon-bottom" plain size="large" style="margin: 0 10px" type="primary">导入</el-button>

          </el-upload>

          <el-button icon="el-icon-top" plain size="large" type="primary" @click="exp">导出</el-button>

        </div>


      </div>


      <!--//弹窗事件-->

      <div>

        <el-dialog id="change" :before-close="addHandleClose" :visible.sync="addDialogFormVisible" title="新增班级"
                   width="25%">

          <el-form ref="form" :model="form" :rules="rules" label-width="70px">


            <el-form-item label="选择专业" prop="className">

              <el-select v-model="form.professionId" filterable placeholder="请选择">

                <el-option v-for="item in options" :key="item.professionId" :label="item.professionName"
                           :value="item.professionId">

                </el-option>

              </el-select>

            </el-form-item>


            <el-form-item label="班级编号" prop="classId">

              <el-input v-model="form.classId" placeholder="请输入班级编号"></el-input>

            </el-form-item>


            <el-form-item label="班级名称" prop="className">

              <el-input v-model="form.className" placeholder="请输入班级名称"></el-input>

            </el-form-item>


          </el-form>

          <div slot="footer" class="dialog-footer">

            <el-button icon="el-icon-error" plain type="danger" @click="addDialogFormVisible = false">取 消</el-button>

            <el-button icon="el-icon-success" type="success" @click="saveClass">确 定</el-button>

          </div>

        </el-dialog>

      </div>

      <!--//弹窗事件2-->

      <div>

        <el-dialog id="change" :before-close="editHandleClose" :visible.sync="editDialogFormVisible" title="编辑专业"
                   width="25%">

          <el-form ref="form" :model="form" :rules="rules" label-width="70px">


            <el-form-item label="选择专业" prop="className">

              <el-select v-model="form.professionId" filterable placeholder="请选择">

                <el-option v-for="item in options" :key="item.professionId" :label="item.professionName"
                           :value="item.professionId">

                </el-option>

              </el-select>

            </el-form-item>


            <el-form-item label="班级编号" prop="classId">

              <el-input v-model="form.classId" :disabled="true" placeholder="班级编号"></el-input>

            </el-form-item>


            <el-form-item label="班级名称" prop="className">

              <el-input v-model="form.className" placeholder="请输入班级名称"></el-input>

            </el-form-item>


          </el-form>

          <div slot="footer" class="dialog-footer">

            <el-button icon="el-icon-error" plain type="danger" @click="editDialogFormVisible = false">取 消</el-button>

            <el-button icon="el-icon-success" type="success" @click="updateClass">确 定</el-button>

          </div>

        </el-dialog>

      </div>


      <!--表格事件-->

      <div class="home" style="margin: 10px">

        <el-table :data="tableData" :row-class-name="tableRowClassName" border header-cell-class-name="headerBg"
                  size="medium" style="width: 100%" @selection-change="handleSelectionChange">

          <el-table-column type="selection" width="55">

          </el-table-column>


          <el-table-column label="班级编号" prop="classId">

          </el-table-column>

          <el-table-column label="所属学院" prop="departmentName">

          </el-table-column>

          <el-table-column label="所属专业" prop="professionName">

          </el-table-column>


          <el-table-column label="班级名称" prop="className">

          </el-table-column>


          <el-table-column label="操作">

            <template slot-scope="scope">

              <el-button

                  icon="el-icon-edit"

                  size="small"

                  type="success" @click="handleEdit(scope.$index, scope.row)">编辑

              </el-button>

              <el-popconfirm

                  cancel-button-text="我在想想哈"

                  icon-color="red"

                  title="确定删除吗？"

                  @confirm="handleDelete(scope.$index, scope.row.classId)"

              >

                <el-button slot="reference" icon="el-icon-delete-solid"

                           size="small" style="margin-left: 6px" type="danger">删除

                </el-button>

              </el-popconfirm>
            </template>
        </el-table-column>
      </el-table>

      <div style="margin: 10px 0">
        <el-pagination
            :current-page="currentPage"
            :page-size="pageSize"
            :page-sizes="[5, 7,10, 20,100,200,500]"
            :total="total"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange">
        </el-pagination>

      </div>
    </div>

  </div>
</template>

<script>
import request from '@/utils/request'

export default {
  name: "Class",
  components: {},

  //页面初始方法  调用生命周期
  created() {
    this.load()
  },
  methods: {
    importSuccess() {
      this.$message.success("文件导入成功！")
      this.load()
    },
    exp() {
      // window.open("/department/export")
      location.href = "http://localhost/class/export"
    },
    reset() {
      this.searchId = '';
      this.searchName = '';
      this.load()
    },
    removeBatchByIds() {
      // console.log(this.multipleSelection.map(v => v.professionId))
      let ids = this.multipleSelection.map(v => v.classId)
      request.delete("/class/delbatch/" + ids).then(res => {
        this.$notify({
          title: '成功',
          message: '批量删除成功！',
          type: 'success'
        });
        this.load()
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;

    },

    handleSizeChange(val) {
      this.pageSize = val
      this.load()
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.load()
      console.log(`当前页: ${val}`);
    },

    load() {
      // alert("dfd")
      request.get("/class/findpage", {
        params: {
          pageNum: this.currentPage,
          pageSize: this.pageSize,
          searchId: this.searchId,
          searchName: this.searchName
        }
      }).then(res => {
        this.tableData = res.records
        this.total = res.total
        console.log(res.records)
      })
    },
    handleEdit(index, row) {
      // 编辑前 查询 否则id为空options为空
      this.beforeSaveFindPro()
      this.form = JSON.parse(JSON.stringify(row))
      this.editDialogFormVisible = true

      // console.log(index)
      // this.form.departmentId = ''
      console.log(index, row);
    },
    //新增前对选项卡 学院名的查询
    beforeSaveFindPro() {
      request.get("/class/findpro").then(res => {
        console.log(res)
        this.options = res
        console.log(this.options)

      })

    },
    //新增
    saveClass() {

      request.post("/class/save", this.form).then(response => {
        // alert(response)
        // console.log(response)
        if (response) {
          {
            this.searchId = '';
            this.searchName = '';
            this.load()
            this.$message({
              showClose: true,
              message: '恭喜你，添加成功哦~',
              type: 'success'
            });
          }
        } else {
          this.searchId = '';
          this.searchName = '';
          this.load()
          this.$message({
            showClose: true,
            message: '添加失败！',
            type: 'error'
          });
        }

      })
      // console.log(this.form.departmentId)
      this.addDialogFormVisible = false

    },

    //修改
    updateClass() {
      request.put("/class/update", this.form).then(response => {
        console.log(response);
        if (response.data) {

          this.load()
          this.$message({
            showClose: true,
            message: '恭喜你，成功哦~',
            type: 'success'
          });

        }
      })
      this.editDialogFormVisible = false
    },
    tableRowClassName({row, rowIndex}) {
      if (rowIndex == 0) {
        return 'warning-row';
      } else if (rowIndex % 2 == 0) {
        return 'success-row';
      }
      return '';
    },
    handleDelete(index, id) {
      // console.log(id);
      request.delete("/class/delsingle/" + id).then(res => {
        this.$notify({
          title: '成功',
          message: '删除成功！',
          type: 'success'
        });
        this.load()
      })
    },

    addClass() {
      this.beforeSaveFindPro()
      this.form = {}
      this.addDialogFormVisible = true
    },

    addHandleClose(done) {
      // this.$confirm('确认关闭？')
      //     .then(_ => {
      //       done();
      //     })
      //     .catch(_ => {
      //     });
      this.addDialogFormVisible = false
    },
    editHandleClose(done) {
      // this.$confirm('确认关闭？')
      //     .then(_ => {
      //       done();
      //     })
      //     .catch(_ => {
      //     });
      this.editDialogFormVisible = false
    }
  },
  data() {
    return {
      //为查询出的下拉框
      options: [],
      //   {
      // value: '选项1',
      // label: '黄金糕'
      // }
      tableData: [],
      multipleSelection: [],
      // tableData: [],
      searchId: '',
      searchName: '',
      pageSize: 7,
      total: 10,
      currentPage: 1,
      visible: false,
      addDialogFormVisible: false,
      editDialogFormVisible: false,
      form: {
        classId: '',
        professionId: '',
        className: ''
      },
      // rules: {
      //
      //   departmentName: [
      //     {required: true, message: '请输入学院名', trigger: 'blur'},
      //     {pattern: /^[\w\u4e00-\u9fa5]+$/, message: '包含特殊字符', trigger: 'blur'},
      //     {pattern: /^[a-zA-Z]+$|^[\u4e00-\u9fa5]+$/, message: '只能全中文或全英文', trigger: 'blur'},
      //
      //   ]
      // },

      // tableData: [{
      //   classId: '4',
      //   departmentName: '发的',
      //   professionName: 'fg4555',
      //   className: 'hg的',
      // }],
    };
  }

}
</script>

<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}

.headerBg {
  background: #eee !important;
}
</style>
